<template>
	<view>

		<view class="goodsContent ">
			<view class="goodsLeftList" id="left">
				<view class="goodsItem" v-for="(item,index) in goodsList" :key="index" v-if="(item.p_type==0)"
					:id="'id'+index" @click="shopinfo(item)"
					:class="[item.p_show?'fade-in':'hide',item.p_load?'':'fixed1']">

					<image :src="item.image" class="good-banner" @error="errorImg(index,'goodsList')" mode="widthFix"
						@load="seccess(index,'goods')">
					</image>
					<view class="goodsName">
						{{item.goods_name}}
					</view>

					<view class="goodsPrice flex align-center">
						<view class="text-price good-price ">{{item.price*item.discount}}</view>
						<text class="text text-gray s-pass-price" v-if="item.discount!=1">{{item.price}}</text>
					</view>
					<view class="good-bottom flex justify-between">
						<view class="basis-df text-cut">销量：{{item.sold_num}}</view>
						<view class="good-discount middle" v-if="item.discount!=1">
							{{item.discount*10}}折
						</view>
					</view>
				
				
				</view>
			</view>
			<view class="goodsRightList" id="right">
				<view class="goodsItem" v-for="(item,index) in goodsList" v-if="item.p_type==1" :id="'id'+index"
					@click="shopinfo(item)" :class="[item.p_show?'fade-in':'hide',item.p_load?'':'fixed1']">
					<image :src="item.image" class="good-banner" mode="widthFix" @load="seccess(index,'goods')"
						@error="errorImg(index,'goodsList')">
					</image>
					<view class="goodsName">
						{{item.goods_name}}
					</view>
					
					<view class="goodsPrice flex align-center">
						<view class="text-price good-price ">{{item.price*item.discount}}</view>
						<text class="text text-gray s-pass-price" v-if="item.discount!=1">{{item.price}}</text>
					</view>
					<view class="good-bottom flex justify-between">
						<view class="basis-df text-cut">销量：{{item.sold_num}}</view>
						<view class="good-discount middle" v-if="item.discount!=1">
							{{item.discount*10}}折
						</view>
					</view>
							
				</view>
			</view>



		</view>

	</view>
</template>

<script>
	export default {
		name: "waterfall",
		props: {
			goodsList: {
				type: Array,
				default: {}
			}
		},
		data() {
			return {
				total: 0,
				dataNum: {
					preNum: 0,
					total: 0,
					isShow: false,
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true

				},
			};
		},
		watch: {
			goodsList(val) {
			
				this.goodsList = val;
			
			}
		},
		mounted() {
			
		},

		methods: {
			shopinfo(res) {
				this.$emit("clickItem", res);

			},
			errorImg(...dat) { //图片加载失败给出默认图
				switch (dat[1]) {
					case 'goodsList':
						this.$nextTick(() => {
							this.goodsList[dat[0]].p_type = -1; //不显示
							this.addUp(dat[0]);
						})
						break;

				}

			},
			seccess(index, type) {
				let good = () => {
					(!this.goodsList[index].p_load) ? (() => {
						this.addUp(index);
					})() : "";
				}
				switch (type) {
					case "goods":
						good();
						break;
					case "banner":
						this.banner[index].isshow = true;
						break;
					case "FocusNews":
						this.FocusNews[index].isshow = true;
						break;
				}
			},
			/**
			 * 累计计数方法
			 */
			addUp(index) {
				this.total++;
				(this.dataNum.total == this.total) ? (() => {
					let current = parseInt(this.dataNum.total - this.dataNum.preNum);
					for (let i = current; i < parseInt(this.dataNum.total); i++) {
						this.goodsList[i].p_load = true;
						this.showImge(i);
					}
				})() : "";
			},

			showImge(index) {
				let rest = () => {
					setTimeout(() => {
						const query = uni.createSelectorQuery().in(this);
						query.select('#id' + index).boundingClientRect(data => {
							let val = (this.LeftListHeight - this.RightListHeight);
							let create = () => {
								if (this.goodsList[index].p_type == 0) {
									this.LeftListHeight += data.height;
								} else if (this.goodsList[index].p_type == 1) {
									this.RightListHeight += data.height;
								}
								this.goodsList[index].p_show = true;
								this.upOption.use = true;
								this.dataNum.isShow = false;
							}
							let doLeft = () => {
								this.goodsList[index].p_type = 0;
								create();
							}
							let doRight = () => {
								this.goodsList[index].p_type = 1;
								create();
							};
							(val <= 0) ? doLeft(): doRight();
						}).exec();
					}, 300);
				};
				(this.goodsList[index].p_type != -1) ? rest(): "";

			},




		}
	}
</script>

<style scoped>
	.shop-bar1 {
		width: 100%;
		height: 70upx;
		z-index: 999;
		white-space: nowrap;
		align-items: center;
		display: -webkit-box;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		line-height: 70upx;

	}

	.shop-bar1-view {
		height: 100%;
	}

	.shopbar2 {
		width: 96%;
		height: 70upx;
		margin-left: 2%;
		z-index: 99;
		background: #F7F7F7;

		white-space: nowrap;
		align-items: center;
		display: -webkit-box;
		flex-direction: row;
		-webkit-box-align: center;
		align-items: center;
		line-height: 70upx;
	}

	.good-nav-item {
		width: 20%;
		height: 100%;
	}

	.tabnohover {
		font-size: 28upx;
		font-weight: 500;
		color: #999999;
		padding-top: 10upx;
	}

	.tabhover {
		font-size: 32upx;
		font-weight: 800;
		color: #333333;
	}

	.good-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: flex-start;
	}

	.good-box-item {
		margin-bottom: 10px;
		width: 48%;
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 20upx;

	}

	.good-banner {
		width: 100%;
		min-height: 250upx;
		max-height: 450upx;
		border-radius: 20upx 20upx 0px 0px;
	}

	.good-name {
		width: 90%;
		font-size: 24upx;
		font-weight: 800;
		color: #333333;
		height: 60upx;
		line-height: 60upx;
		margin-left: 5%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;


	}

	.s-pass-price {


		text-decoration: line-through;

	}

	.nav-fixed2 {
		position: fixed;
		width: 100%;

		left: 0;
		z-index: 99;
		background-color: #FFFFFF;
	}

	.good-banner-box {
		width: 100%;
		display: inline-block;
	}

	.good-view {
		width: 100%;
	}

	.tags-box {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10upx;
	}

	.cu-tag {
		margin: 8upx;
	}



	/* 商品列表 */
	.goodsContent {
		width: 100%;
		background: #f7f7f7;
		display: flex;
		justify-content: space-between;
	}


	.goodsLeftList {
		width: calc(100vw*(340/750));
	}

	.goodsRightList {
		width: calc(100vw*(340/750));
	}

	.goodsItem {
		background: #FFFFFF;
		width: 100%;
		margin-top: calc(100vw*(22/750));
		border-radius: 20upx;
		padding-bottom: calc(100vw*(37/750));

	}


	.goodsName {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		line-height: calc(100vw*(36/750));
		margin-left: calc(100vw*(20/750));

		margin-top: calc(100vw*(29/750));
		width: calc(100vw*(285/750));
		font-size: calc(100vw*(26/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;


	}

	.good-bottom {
		position: relative;
		width: calc(100vw*(285/750));
		margin-left: calc(100vw*(20/750));
		margin-top: calc(100vw*(22/750));
		font-size: calc(100vw*(20/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.goodsPrice {
		margin-top: calc(100vw*(29/750));
		font-size: calc(100vw*(32/750));
		font-family: PingFang SC;
		font-weight: 800;
		color: #E53D3D;
		margin-left: calc(100vw*(20/750));
	}
	.goodsPrice text{
		font-size: calc(100vw*(24/750));
		font-family: PingFang SC;
		font-weight: 500;
		text-decoration: line-through;
		color: #999999;
		margin-left: 20rpx;
	}

	.good-price {
		font-size: calc(100vw*(32/750));
		font-family: PingFang SC;
		font-weight: 800;
		color: #E53D3D;
	}

	.good-discount {
		height: calc(100vw*(28/750));
		min-width: calc(100vw*(66/750));
		font-size: calc(100vw*(18/750));
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		background: #E53D3D;
		border-radius: 8rpx;
	}

	.goodsPrice image {
		width: 20rpx;
		height: 20rpx;
		padding: 0 5rpx;
	}

	.goodsDesc {
		width: 100%;
		font-size: 20upx;
		padding: 5upx 10upx;
		font-weight: 500;
		color: #999999;
	}

	.goodLogo {
		width: 90%;
		margin-left: 10upx;
		height: 50upx;
		display: flex;
		align-items: center;
		flex-direction: row;
		margin-bottom: 10upx;
		background: #F7F7F7;
		border-radius: 20upx;
	}

	.goodLogoImg {

		width: 100%;

		border-radius: 50%;

	}

	.shopname {
		width: 80%;
		font-size: 24upx;
		font-weight: 500;
		color: #333333;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
		margin-left: 5upx;
	}

	.logobox {

		width: 35upx;
		height: 35upx;
		background-color: #FFAFA8A2;
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		border-radius: 50%;
		margin-left: 10upx;

	}

	.goodsLeftList1 {
		width: 100%;

	}

	.goodsItem1 {
		max-height: 600rpx;
		height: auto;
		width: 48%;
	}

	.goodsItem1 {
		background: #FFFFFF;
		width: 48%;
		margin-bottom: 30rpx;
		margin-top: 15upx;
		border-radius: 20upx;
		padding-bottom: 20upx;
	}

	.goodsItem1 image {
		max-height: 600rpx;
		height: auto;
		width: 100%;

	}
</style>
